<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .childbox{
            height: 50px;
            margin-top: 10px;
        }
       .parentbox p{
           height: 30px;
           line-height: 30px;
       }
       .parentbox{
           width: 200px;
           margin: 0 auto;
           padding-top: 10px;
       }
    </style>
</head>

<body>
    <!-- 
            逆向传值，通过自定义事件
            子传递：使用$emit(自定义事件名称，传递值)触发监听
            父调用：接收监听<child @自定义事件名称=处理函数></child>

     -->
    <div id="box">
        <parent></parent>
    </div>
    <template id="p">
        <div class="parentbox">
            <!-- 调用子组件 处理函数不要加() -->
           <p> {{msg}} </p>
            <child @change="getcmsg"> </child>
            <!-- <child2 @change2="getsub"> </child2> -->
        </div>
    </template>
    <template id="c">
        <div class='childbox'>
            <button @click="fn">增加 1</button>
            <button @click="fn2">减少 1</button>
        </div>
    </template>
    <!-- <template id="c2">
        <div class='childbox'>
            <button @click="fn2">减少 1</button>
        </div>
    </template> -->
    <script>
        var vm = new Vue({
            el: "#box",
            data: {},
            components: {
                parent: {
                    template: "#p",
                    data() {
                        return {
                            msg: ''
                        }
                    },
                    methods: {
                        getcmsg(inmsg) {
                            //准备传递数据
                            console.log(inmsg);
                            this.msg = inmsg;
                        },
                        // getsub(num){
                        //     console.log(num);
                        //     this.msg = num;
                        // }
                    },
                    components: {
                      child:{
                        template: '#c',
                        data() {
                            return {
                                cmsg: 0
                            }
                        },

                        methods: {
                            fn() {
                                this.$emit("change", this.cmsg++)
                            },
                            fn2(){
                                this.$emit("change2",this.cmsg--)
                            }
                        }
                      },
                    //   child2:{
                    //     template: '#c2',
                    //     data() {
                    //         return {
                    //             cmsg: 0
                    //         }
                    //     },
                    //     methods: {
                    //         fn2() {
                    //             this.$emit("change2", this.cmsg--)
                    //         }
                    //     }
                    //   }
                    }

                }
            }

        })
    </script>
</body>

</html>